<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@include file="/static/common/taglib.jsp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <title>人员派班</title>
    <%@include file="../../public/commonCss.jsp" %>
    <link href="${ctx}/static/css/acss/model_jl.css" rel="stylesheet" type="text/css"/>
    <%@include file="../../public/commonJs.jsp" %>
    <%@include file="../../public/easyui.jsp" %>
    <style>
        .layui-upload-button {
            height: 32px;
            line-height: 32px;
        }
    </style>
</head>
<body ms-controller="main" class="ms-controller">
<div id="wrapper">
    <div class="boxmain whiteBox lrbox boxdisplay">
        <div class="lrboxleft borderR">
            <div class="from-header borderB ">
                <span class="font14">交路列表</span>
            </div>
            <div class="from-body withheader contentbox8">
                <ul id="treeDemo" class="ztree" style="width:100%;height: 100%; overflow: auto;"></ul>
            </div>
        </div>
        <div class="lrboxmain borderL">
            <div class="from-header borderB contentbox">
                <div class="layui-inline">
                    <div class="layui-input-inline">
                        <button class="button-noborder" id="sidebarToggle" type="button"
                                style="margin-left:0px;margin-right:5px;">
                            <i class="fa fa-arrows-alt fa-lg"></i>
                        </button>
                    </div>
                </div>
                <span class="dividers"></span>
                <div class="layui-inline layui-form">
                    <div class="layui-input-inline">
                        <input type="checkbox" value="1" name="tempTrain" lay-filter='r2'
                               style="margin-left:30px;margin-top: 0px" title="查看临客"/>
                    </div>
                </div>
                <span class="dividers"></span>
                <div class="layui-inline">
                    <input type="file" class="layui-upload-file" name="file" lay-title="派班导入">
                </div>
                <a href="${ctx}/static/excelModel/giveWorkImport.xls" class="layui-btn layui-btn-small">模板下载</a>
                <div class="layui-inline fr">
                    <div class="layui-input-inline">
                        <select id="ss" class="easyui-combogrid" style="width: 250px;height: 30px">
                        </select>
                        <button class="layui-btn layui-btn-normal layui-btn-small"
                                ms-on-click="loadSearchData()">搜索
                        </button>
                    </div>
                </div>
            </div>
            <div class="from-body withheader contentbox" style=" overflow: auto;">
                <table class="layui-table">
                    <thead>
                    <tr>
                        <th width="50" align="center">行号</th>
                        <th width="150" align="center">交路</th>
                        <th>车次</th>
                        <c:forEach items="${dateWorks}" var="dateWork">
                            <th>
                                <p>${dateWork.workDate}人员派班</p>
                                <p>交路：${dateWork.roadNum}</p>
                                <p>人数：${dateWork.userNum}</p>
                            </th>
                        </c:forEach>
                    </tr>
                    </thead>
                    <tbody style="font-size:12px;">
                    <tr ms-repeat-rl="tableData">
                        <td align="center">{{$index+1}}</td>
                        <td align="center">{{rl.tName}}</td>
                        <td style="padding-bottom: 0px;">
                            <div class="jlArea">
                                <div class="jlButton" style="width:100px;" ms-repeat-tl="rl.trains">
                                    <table class="layui-table" lay-skin="nob">
                                        <tr align="center">
                                            <td><span style="margin-right:5px;color: #999">{{$index+1}}</span></td>
                                            <td><span style="color: #4287cf;">{{tl.code}}</span></td>
                                        </tr>
                                        <tr align="center">
                                            <td colspan="2">{{tl.startCity}}~<span
                                                    style="color: #999;">{{tl.startTime}}</span></td>
                                        </tr>
                                        <tr align="center">
                                            <td colspan="2">{{tl.endCity}}~<span
                                                    style="color: #999;">{{tl.endTime}}</span></td>
                                        </tr>
                                    </table>
                                </div>
                            </div>
                        </td>
                        <td width="150px" align="center" ms-repeat="rl.dateUserWorks">
                            <table class="layui-table" lay-skin="nob">
                                <tr ms-repeat-ul="$val" class="js_tr">
                                    <td style="padding: 5px 2px" align="center">
                                        <button class="layui-btn layui-btn-mini"
                                                ms-attr-title="派班人员：{{ul.username}}"
                                                ms-on-click="updateGiveWork(rl,$key,ul)"
                                                ms-class="layui-btn-primary:ul.hadRemind==0">
                                            {{ul.trainNum}} {{ul.username}}
                                        </button>
                                    </td>
                                    <td style="padding: 5px 2px">
                                        <button class="layui-btn layui-btn-mini"
                                                ms-attr-title="叫班时间 {{ul.giveWorkRemindTime}}"
                                                ms-class="layui-btn-primary:ul.hadRemind==0">
                                            {{ul.giveWorkRemindTime}}
                                        </button>
                                    </td>
                                    <td style="padding: 5px 2px">
                                        <button class="layui-btn layui-btn-mini layui-btn-danger"
                                                ms-on-click="removeUser($val,ul)" title="删除派班">
                                            删除
                                        </button>
                                    </td>
                                </tr>
                            </table>
                            <a ms-on-click="addUser($key,rl)" href="javascript:;" class="jluseradd"></a>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <!-- whitebox -->
</div>
<script type="text/javascript">
    var vm;
    var zTreeObj;
    $(function () {
        vm = avalon.define({
            $id: "main",
            tableData: [],
            treeData: [],
            roadId: '',
            searchKey: '',
            num: '',
            tempTrain: ''//0表示不查看临客
        });
        loadTableData();
        loadTreeData();
        initCommgrid();
        $("#sidebarToggle").click(function (event) {
            $(".lrbox").toggleClass('boxdisplay');
        });
        $('.js_btn').click(function () {
            layerUtil.closeAll();
        });
    });


    //初始化搜索列表
    function initCommgrid() {
        $('#ss').combogrid({
            panelWidth: 400,
            delay: 5,
            idField: 'roadId',
            prompt: '搜索交路、车次',
            textField: 'trainCodeStr',
            fitColumns: true,
            url: '${ctx}/giveWorkController/selectAllRoadUser.action',
            mode: 'remote',
            nowrap: false,
            columns: [[
                {field: 'trainCodeStr', title: '车次', width: 150},
                {field: 'userStr', title: '机械师', width: 50},
                {field: 'trainNumStr', title: '车组号', width: 50}
            ]]
        });
    }

    function openTips(_this, r, ul) {
        layui.layer.tips($(_this).next().html(), $(_this), {
            tips: [1, '#dcdcdc'] //还可配置颜色
        });
    }

    //移除派班人员
    function removeUser(arr, ul) {
        layerUtil.confirm("你确定移除该派班人员吗?", function () {
            var dataStr = {
                id: ul.giveWorkId
            }
            ajaxUtil.post('${ctx}/giveWorkController/deleteById.action', dataStr, true, function () {
                layui.layer.msg('删除成功', {icon: 1});
                arr.remove(ul);
            })
        })
    }

    //更新派班
    function updateGiveWork(road, dateStr, ul) {
        var giveWorkId = ul.giveWorkId;
        var roadName = road.tName;
        var trainCodeStr = road.trainStr;
        var roadId = road.id;
        layer.open({
            type: 2,
            title: [dateStr + " " + roadName + " " + trainCodeStr, 'font-size:18px'],
            area: ['700px', '85%'],
            fix: false, //不固定
            maxmin: false,
            content: "${ctx}/giveWorkController/toUserList.action?giveWorkId=" + giveWorkId + "&dateStr=" + dateStr + "&roadId=" + roadId
        });

    }

    function addUser(dateStr, road) {
        layer.open({
            type: 2,
            title: [dateStr + " " + road.tName + " " + road.trainStr, 'font-size:18px'],
            area: ['700px', '85%'],
            fix: false, //不固定
            maxmin: false,
            content: "${ctx}/giveWorkController/toUserList.action?dateStr=" + dateStr + "&roadId=" + road.id
        });
    }

    //初始化树z
    function initZTree() {
        var setting = {
            data: {
                simpleData: {
                    enable: true, //是否启用简单数据类型
                    idKey: "id",
                    pIdKey: "pid",
                    rootPId: 0
                }
            },
            callback: { //回调
                onClick: nodeOnClick
            }
        };
        zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, vm.$model.treeData);
        var nodes = zTreeObj.getNodes();
        zTreeObj.expandNode(nodes[0]);
    }

    //加载菜单数据
    function loadTreeData() {
        var dataStr = {tempTrain: vm.$model.tempTrain};
        ajaxUtil.post('${ctx}/roadController/selectAllTreeData.action', dataStr, false, function (data) {
            vm.treeData = data.datas;
            initZTree();
        });
    }

    //点击节点的回调
    function nodeOnClick(event, treeId, treeNode) {
        if ('root' == treeNode.id) {
            vm.roadId = '';
        } else if ("wuhan" == treeNode.id) {
            vm.num = "1";
        } else if ("hankou" == treeNode.id) {
            vm.num = "0";
        } else {
            vm.roadId = treeNode.id;
        }
        loadTableData();
    }

    //搜索
    function loadSearchData() {
        loadTableData();
    }

    //加载菜单数据
    function loadTableData(isLoad) {
        var dataStr = {
            roadId: vm.$model.roadId,
            searchKey: $('#ss').combogrid('getValue'),
            num: vm.$model.num,
            tempTrain: vm.$model.tempTrain
        }
        ajaxUtil.post("${ctx}/giveWorkController/selectAllGiveWork.action", dataStr, !isLoad, function (data) {
            vm.tableData = data.datas;
        })
    }

    var form = layui.form();
    form.on('checkbox(r2)', function (data) {
        if (data.elem.checked) {
            vm.tempTrain = '1';
        } else {
            vm.tempTrain = '';
        }
        loadTreeData();
        loadTableData();
    });

    layui.upload({
        url: '${ctx}/giveWorkImport/importGiveWorks.action', //上传接口
        ext: 'xls',
        type: 'file',
        before: function (input) {
            layui.layer.load();
        },
        success: function (res) { //上传成功后的回调
            layerUtil.closeAll();
            if (res.code != 0) {
                layerUtil.confirm(res.msg);
            } else {
                layerUtil.success("导入成功");
                loadTableData();
            }
        }
    });

    //监听提交
    form.render();
</script>
</body>
</html>